iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 24
0
Modern Web

React.js & Laravel 30天訓練系列 第 24

【Day 24】How & Why Use Semantic UI Responsive

  • 分享至 

  • xImage
  •  

OK 原本我們使用 Semantic Ui 的 Reponsive 只是想要對應 過小的螢幕設備下 什麼東西就不要顯示了

結果我們發現 有一個地方你會更需要他...

我們先看一下程式碼的部分

<Responsive as={Table.Cell} colSpan='1' minWidth={767}>
  <UserName userid={_subjItem.getIn(['subject_data', 'CreatedBy'])}>
  </UserName>
  <ListTime time={_subjItem.getIn(['subject_data', 'CreatedOn'])}>
  </ListTime>
</Responsive>
<Responsive as={Table.Cell} colSpan='1' style={styles.listTableTd} maxWidth={766}>
  <UserName userid={_subjItem.getIn(['subject_data', 'CreatedBy'])}>
  </UserName>
  <ListTime time={_subjItem.getIn(['subject_data', 'CreatedOn'])}>
  </ListTime>
</Responsive>

然後她 render 出來的樣子
https://ithelp.ithome.com.tw/upload/images/20180112/2010776709jPFJAq0u.png

我們的重點是 為什麼我要寫成兩段
來看一下 Table 底下的 td 當畫面變小的時候 semantic ui css 給什麼樣的屬性
https://ithelp.ithome.com.tw/upload/images/20180112/20107767ZXseN3O7HH.png

這個很重要 因為他原本是給 display:block!important;
這會讓你所有的Table Td 全部都佔了一個 row 這樣你的很多東西看起來都會很醜

所以 第一步 請先到 semanticui.min.css:187 把 !important 拿掉

然後 套上 Reponsive 針對不同的device 也就是 semanticui 原本設限的 767px 給不同的 style
style={styles.listTableTd}

這個就是 display:inline-block
這樣就可以解決問題了


上一篇
【Day 23】Implement Other Similar Table List
下一篇
【Day 25】The ListTitle and ReplyCount of ListModules
系列文
React.js & Laravel 30天訓練30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言